<!-- 页脚 -->
<template>
	<view class="footing">
		<view class="footing_list">
			<view class="footing_li">
				<view class="annotation"></view>
				<view class="about">关于工术</view>
				<text class="li_text" @click="goToProductCenter('/pages/about/about')">企业介绍</text>
				<text class="li_text" @click="goToProductCenter('/pages/dynamic/dynamic')">企业动态</text>
				<!-- <text class="li_text">新品上市</text> -->
				<text class="li_text" @click="alertOpinion">意见反馈</text>
			</view>
			<view class="footing_li">
				<view class="annotation"></view>
				<view class="about">技术中心</view>
				<!-- <text class="li_text">定制加工</text> -->
				<text class="li_text" @click="goToProductCenter('/pages/technology/technology?type=0')">视频教学</text>
				<text class="li_text" @click="goToProductCenter('/pages/technology/technology?type=1')">资料下载</text>
			</view>
			<view class="footing_li">
				<view class="annotation"></view>
				<view class="about">个人中心</view>
				<text class="li_text" @click="goToProductCenter('/pages/order/order')">我的订单</text>
				<!-- <text class="li_text">我的钱包</text> -->
				<text class="li_text"
					@click="goToProductCenter('/pages/dersonalCenter/dersonalCenter?type=3')">收货地址</text>
				<text class="li_text"
					@click="goToProductCenter('/pages/dersonalCenter/dersonalCenter?type=2')">个人资料</text>
			</view>
			<view class="footing_li contact">
				<view class="annotation"></view>
				<view class="about">联系我们</view>
				<text class="li_text1">菏泽工术光电科技有限公司</text>
				<text class="li_text1">地址：山东省菏泽市定陶区汉源路与麟迹路交汇处</text>
				<text class="li_text1">邮箱：anliu@kungshu.com</text>
				<text class="li_text1">电话：0530-2216166 / 19953067911</text>
			</view>
		</view>

		<!--意见反馈-->
		<uni-popup type="center" ref="opinion" :mask-click="false">
			<view class="op-box">
				<view class="op-title">
					意见反馈
					<view class="op-close" @click="closeOpinion">
						<uni-icons type="closeempty" size="20" color="#666"></uni-icons>
					</view>
				</view>

				<!--内容-->
				<view class="op-content">
					<uni-forms :modelValue="formData" :rules="rules" ref="form">
						<uni-forms-item label="姓名" name="name">
							<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
						</uni-forms-item>
						<uni-forms-item label="电话" name="tel">
							<uni-easyinput type="text" v-model="formData.tel" placeholder="请输入联系电话" />
						</uni-forms-item>
						<uni-forms-item label="内容" name="content">
							<textarea
								style="width:calc(100% - 20px);height:200px;padding:10px;border:1px solid #eee;font-size:13px;"
								maxlength="2000" v-model="formData.content"
								placeholder="请输入意见/建议内容，我们会虚心接受积极改正~"></textarea>
						</uni-forms-item>
					</uni-forms>
					<button @click="submitForm" class="op-submit" type="primary">提交</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var db = uniCloud.database();
	export default {
		name: "footing",
		data() {
			return {
				formData: {
					name: '',
					tel: '',
					content: ''
				},
				rules: {
					// 对name字段进行必填验证
					content: {
						rules: [{
								required: true,
								errorMessage: '请输入意见/建议内容',
							},
							{
								minLength: 3,
								maxLength: 2000,
								errorMessage: '内容长度在 {minLength} 到 {maxLength} 个汉字或字符'
							}
						]
					}
				}
			};
		},
		methods: {
			submitForm() {
				var that = this;
				this.$refs.form.validate().then(res => {
					if (!res.name) {
						res.name = '匿名';
					};
					if (!res.tel) {
						res.tel = '未留电话';
					};

					db.collection('opinion').add(res).then(result => {
						uni.showToast({
							title: '提交成功,感谢您的宝贵建议',
							icon: 'none',
							duration: 3000
						})

						setTimeout(function() {
							that.$refs.opinion.close();
						}, 3000);
					})

				})
			},
			//关闭意见反馈弹窗
			closeOpinion() {
				this.$refs.opinion.close();
			},
			//弹出意见反馈
			alertOpinion() {
				this.$refs.opinion.open();
			},
			goToProductCenter(url) {
				if (url == '/pages/order/order' || url == '/pages/dersonalCenter/dersonalCenter?type=3' || url ==
					'/pages/dersonalCenter/dersonalCenter?type=2') {
					//验证是否登录
					this.checkLogin();
				} else {
					uni.navigateTo({
						url: url
					});
				}


			},
			//验证登录
			checkLogin() {
				uni.getStorage({
					key: 'login-userinfo',
					success: function(res) {
						if (!res || !res.data || !res.data._id) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					},
					fail: function() {
						uni.navigateTo({
							url: '/pages/login/login'
						});
						return false;
					}
				})
			}
		}
	}
</script>

<style scoped>
	.op-submit {
		width: 70%;
		margin-left: 15%;
		height: 35px;
		line-height: 35px;
		font-size: 14px;
		margin-top: 20px;
	}

	.op-content {
		width: 90%;
		margin-left: 5%;
		margin-top: 20px;
		float: left;
		height: 420px;
	}

	.op-close {
		width: 30px;
		height: 30px;
		position: absolute;
		right: 0px;
		top: 0;
		cursor: pointer;
	}

	.op-title {
		float: left;
		width: calc(100% - 20px);
		line-height: 30px;
		padding-left: 20px;
		margin-top: 5px;
		font-size: 15px;
		font-weight: bold;
		position: relative;
	}

	.op-box {
		width: 500px;
		height: 500px;
		background: #fff;
		border-radius: 10px;
	}

	.footing {
		width: 100%;
		height: 260px;
		background-color: #F5F5F5;
		/* background-color: antiquewhite; */
		/* padding-bottom: 70px; */
		padding: 0 70px 70px 30px;
		box-sizing: border-box;
	}

	.footing_list {
		width: 1360px;
		height: 100%;
		margin: 0 auto;
		/* background-color: #F5F5F5; */
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}

	.footing_li {
		flex: 1;
		/* background-color: aqua; */
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.contact {
		flex: 1.5;
	}

	.annotation {
		width: 4px;
		height: 15px;
		background-color: #D9001B;
		position: absolute;
		top: 4px;
		left: -14px;
	}

	.about {
		font-size: 16px;
		font-family: 500;
		color: #000;
		/* text-align: center; */
		flex: 1;
		margin-bottom: 10px;
	}

	.li_text {
		font-size: 16px;
		font-family: 500;
		color: #6A6A6A;
		/* text-align: center; */
		flex: 1;
	}

	.li_text:hover {
		color: #D9001B;
		cursor: pointer;
	}

	.li_text1 {
		font-size: 16px;
		font-family: 500;
		color: #6A6A6A;
		/* text-align: center; */
		flex: 1;
	}

	/* .li_text1:hover {
		color: #D9001B;
	} */
</style>